<template>
	<div class="view-follow">
		<van-nav-bar title="我的关注" left-arrow @click-left="$router.go(-1)" />
		<div class="follow-list">
			<div class="follow-item" v-for="(item,index) in userList" :key="index">
				<img :src="item.userInfo.avatar">
				<div>
					<div class="nickname">{{item.userInfo.nickname}}</div>
					<div class="desc">{{item.userInfo.residence}}</div>
				</div>
				<div class="follow-button">已关注</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import {
		NavBar,
		Button
	} from 'vant'
	Vue.use(NavBar).use(Button)
	import userApi from "../../api/user"
	export default {
		data() {
			return {
				userList: [],
				loading: false
			}
		},
		created() {
			this.initPage();
		},
		methods: {
			getDataList() {
				userApi.getFollowList().then(res => {
					this.userList = res.list;
					this.loading = false;
				})

			},
			initPage() {
				this.getDataList();
			}
		}
	}
</script>
<style lang="less">
	.follow-list {
		padding: 10px;
	}

	.follow-item {
		display: flex;
		background-color: #FFFFFF;
		border-radius: 5px;
		padding: 5px 10px;
		margin-bottom: 10px;
		position: relative;
		align-items: center;

		img {
			width: 45px;
			height: 45px;
			border-radius: 4px;
		}

		div {
			.nickname {
				text-align: left;
				font-weight: 800;
				font-size: 16px;

			}
		}

		.follow-button {
			border: 1px solid #ddd;
			padding: 5px;
			color: #666;
			position: absolute;
			right: 10px;
		}
	}
</style>
